<template>
  <div class="Videowarp">
    <Card
      v-show="showVideo"
      class="Card"
      :src="data3.cover"
      title=""
      time=""
      w="100%"
    />
    <video
      class="video"
      autoplay="true"
      :src="videoUrl"
      v-if="!showVideo"
      controls
    ></video>
    <div class="PlayWarp" v-show="showVideo" @click="getVideo()">
      <p class="icon iconfont PlayFont">&#xe624;</p>
    </div>
  </div>
  <Userinfo
    :brief="data3.author.role"
    :potho="data3.author.userinfo.avatar"
    :name="data3.author.userinfo.username"
  />
  <div class="Videowarp">
    励志
    <div class="one">
      <div v-for="vm in data" :key="vm">
        <Card class="Card" :src="vm.src" :w="vm.w" />
      </div>
    </div>
  </div>
  <div class="Videowarp">
    剪辑
    <div class="one">
      <div v-for="vm in data" :key="vm">
        <Card class="Card" :src="vm.src" :w="vm.w" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { detailsVideo } from "../../axios/api/Allapi";
import videoUrl from "../../assets/video/浪客剑心视频.mp4";
import { reactive, ref } from "vue";
import Card from "../../components/card/cardLet.vue";
import Userinfo from "../../components/UserLet/userInfo.vue";
import img1 from "../../assets/l2.webp";
import img2 from "../../assets/l3.webp";
import img3 from "../../assets/l4.webp";
import { getData } from "../../components/Cache";
import Color from "element-plus/lib/components/color-picker/src/color";
const w = "300px";
var data = reactive([
  {
    src: img1,
    title: "电影慢镜头混剪[浪客剑心(1)]",
    time: "混剪/04'20",
  },
  {
    src: img2,
    title: "电影慢镜头混剪[浪客剑心(2)]",
    time: "混剪/02'36",
  },
  {
    src: img3,
    title: "电影慢镜头混剪[浪客剑心(3)]",
    time: "混剪/03'45",
  },
]);

var showVideo = ref(true);
function getVideo() {
  console.log(showVideo.value);
  showVideo.value = !showVideo.value;
}

/**
 * @param routerId 路由和请求的参数 是纯数字
 */
const router = useRouter();
const routerId = router.currentRoute._value.params.id;

const cache = getData(`${routerId}`);
const data3 = ref(cache);
console.log("进入本地缓存的数据", data3.value);

/**
 * @param getVideodata 请求数据
 * @param start 判断使用缓存还是请求数据
 */

function getVideodata() {
  return detailsVideo(routerId).then((res) => {
    localStorage.setItem(`${routerId}`, JSON.stringify(res));
    data3.value = res;
  });
}

function start() {
  if (data3.length > 0) {
    return;
  }

  getVideodata();
}
start();
</script>

<style scoped>
.Videowarp {
  margin-top: 60px;
  font-size: 40px;
  width: 100%;
  overflow: hidden;
}
.one {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.one:hover {
  overflow-x: scroll;
}
.Card {
  background-color: rgb(255, 255, 255);
  padding-right: 30px;
}
.PlayFont {
  height: 0;
  cursor: pointer;
  font-size: 100px;
  color: aliceblue;
  position: relative;
  bottom: 250px;
  left: 250px;
}
.video {
  height: 400px;
  width: 100%;
}
</style>